<template>
  <div>
    <el-row :gutter="20">
      <!-- 公司列表弹框 -->
      <el-dialog :visible.sync="companyDialog"
                 :close-on-click-modal="false"
                 append-to-body
                 :before-close="handleClose">
        <!-- title="选择公司" -->
        <el-form :model="getCompanyListParam"
                 label-width="60px">
          <el-row class="show-dialog-style">
            <el-col :span="5">
              &nbsp;
            </el-col>
            <el-col :span="8"
                    style="padding-right:27px;">
              <el-select v-model="getCompanyListParam.company_type"
                         @change="onCompanyList">
                <el-option v-for="item in companyTypeList"
                           :key="item.code_id"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="8"
                    style="padding-right:27px!important;">
              <el-input v-model="getCompanyListParam.company_name"
                        placeholder="请输入公司名称">
              </el-input>
            </el-col>
            <el-col :span="3">
              <el-button @click="searchCompanyList"
                         type="primary"
                         id="headLeftSelect">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="companyList.list"
                  @row-click="selectCompany"
                  height="310"
                  @current-change="handleCurrentChange"
                  ref="companyTable"
                  class="show-table-style"
                  :header-cell-style="{background:'#f5f5f5'}"
                  :highlight-current-row="true">
          <!-- <el-table-column prop="company_type_name"
                         label="单位类型">
        </el-table-column> -->
          <el-table-column prop="company_name"
                           label="单位名称"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="addr"
                           label="单位地址"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="contact_name"
                           label="负责人"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="contact_phone"
                           label="联系电话"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="create_date"
                           label="入驻时间"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination id="pagination"
                       @current-change="handleCompanyCurrentChange"
                       :current-page="getCompanyListParam.page"
                       :page-sizes="[10]"
                       :page-size="getCompanyListParam.page_size"
                       background
                       layout="total,sizes,prev, pager, next, jumper"
                       :total="companyList.total_count"
                       style="text-align:center;margin-top:20px;margin-bottom:-20px;">
        </el-pagination>
        <div slot="footer"
             class="dialog-footer"
             style="text-align:center;">
          <el-button @click="onCancel"
                     id="back-style">取消</el-button>
          <el-button type="primary"
                     @click="confirmChooseCompany"
                     style="margin-left:16px;"
                     id="headLeftSelect">确定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { OBSManageApi } from '@/services/orgainzeManage'
// import { compile } from 'vue/types/umd'
// import { compile } from 'vue/types/umd'
export default {
  props: {
    comId: {
      type: String,
      default: () => {
        return ''
      }
    },
    callBackFunc: Function,
    isShowCompanyDialog: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      currentRow: null,
      companyDialog: false,
      // 单位列表
      companyList: {
        list: []
      },
      orgainzationTreeParam: {
      },
      // 单位类型列表
      companyTypeList: [{ name: '全部', value: '' }],
      // 获取单位列表参数
      getCompanyListParam: {
        company_type: '',
        company_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.currentRow = val;
      console.log('currentRow=', this.currentRow)
    },// 获取公司类型列表
    getCompanyTypeList () {
      return OBSManageApi.getCompanyTypeList({
        params: {
          code_type: 'companyType',
          is_page: 0
        }
      }).then(res => {
        // console.log(res, 'get company type list')
        if (res.code === 0) {
          // console.log('csy-arr-companyTypeList=', this.companyTypeList, res.data.list)
          this.companyTypeList = res.data.list
          this.companyTypeList.unshift({ name: '全部', value: '' })
        }
      })
    },
    onCancel () {
      this.companyDialog = false;
      this.$emit('update:isShowCompanyDialog', false)
      this.callBackFunc({});
    },
    // 公司列表筛选事件
    onCompanyList () {
      this.searchCompanyList()
    },
    // 搜索公司列表
    searchCompanyList () {
      this.getCompanyListParam.page = 1
      this.getCompanyList()
    },
    // 公司列表选择行
    selectCompany (row) {
      // console.log(row, '111');
      this.orgainzationTreeParam.company_id = row.company_id
      this.orgainzationTreeParam.company_name = row.company_name
    },
    // 获取公司列表
    getCompanyList () {
      return OBSManageApi.getCompanyList({
        params: this.getCompanyListParam
      }).then(res => {
        // console.log(res, 'get company list')
        if (res.code === 0) {
          this.companyList = res.data
        }
      })
    },
    // 公司列表分页跳转
    handleCompanyCurrentChange (current) {
      this.getCompanyListParam.page = current
      this.getCompanyList()
    },
    // 选择单位右上角关闭事件
    handleClose (done) {
      this.orgainzationTreeParam = {}
      this.companyDialog = false;
      this.$emit('update:isShowCompanyDialog', false)
      done()
      // 清空记忆值
      this.getCompanyListParam.company_type = ''
      this.getCompanyListParam.company_name = ''
      this.getCompanyListParam.page = 1
    },
    // 在弹框中确定选择某行数据
    confirmChooseCompany () {
      // console.log('csy====', this.orgainzationTreeParam.company_id, this.orgainzationTreeParam.company_name);
      if (this.orgainzationTreeParam.company_id == undefined && this.orgainzationTreeParam.company_name == undefined) {
        this.$message('请先选中数据!')
      } else {
        this.callBackFunc(this.orgainzationTreeParam)
        this.companyDialog = false;
        this.$emit('update:isShowCompanyDialog', false)
        this.orgainzationTreeParam = {}
        // this.updateSelectedCompanyList(this.orgainzationTreeParam.company_id, this.orgainzationTreeParam.company_name)
        // console.log(this.selectedCompanyList, 'selected company list')
        // this.getOrgainzationTree()
      }
    },
    selectedCurrentRow (compId) {//默认已选中的行
      let comArr = this.companyList.list;
      for (var i = 0; i < comArr.length; i++) {
        if (compId == comArr[i].company_id) {
          this.selectCompany(comArr[i]);
          this.$refs.companyTable.setCurrentRow(comArr[i]);//默认选中的行
          // console.log('77777777', comArr[i], compId);
          break;
        }
      };
    }
  },
  watch: {
    async isShowCompanyDialog (n, o) {
      if (n == true) {
        this.companyDialog = n;
        await this.getCompanyTypeList();//单位类型标准码
        await this.getCompanyList();//单位列表
        await this.selectedCurrentRow(this.comId);//已选中的行companyList
      }
      console.log('w-isShowCompanyDialog=', n, 'comId=', this.comId)
    }
  },
  created () {
    if (this.isShowCompanyDialog == true) {
      this.getCompanyTypeList();//单位类型标准码
      this.handleCompanyCurrentChange(1)
    }
    this.companyDialog = this.isShowCompanyDialog;
    console.log('c-isShowCompanyDialog=', this.isShowCompanyDialog, 'comId=', this.comId)
  }
}
</script>

<style lang="scss" scoped>
.show-dialog-style {
  margin-bottom: 20px;
}
</style>